<template>
  <div class="container">
    <el-row type="flex" justify="space-between">
      <div class="menus-wrapper">
        <!-- 引入左边插件 -->

        <postAsign @getData="getData" />
      </div>
      <div class="post-wrapper">
        <!-- 输入框 -->
        <div class="search-wrapper">
          <el-row class="search-input" type="flex" align="middle">
            <input
              placeholder="请输入想去的地方，比如：'广州'"
              v-model="searchValue"
              @keyup.enter="handleSearch"
            />
            <i class="el-icon-search" @click="handleSearch"></i>
          </el-row>
          <!-- 推荐城市 -->
          <el-row class="recommendCity">
            <span>推荐：</span>
            <div
              class="cityName"
              v-for="(city, index) in recommendCity"
              :key="index"
            >
              <nuxt-link :to="`/post?city=${city}`">
                <span @click="searchCity(index)">{{ city }}</span>
              </nuxt-link>
            </div>
          </el-row>
        </div>
        <div class="recommend-wrapper">
          <el-row
            class="post-title"
            type="flex"
            justify="space-between"
            align="middle"
          >
            <h4>推荐攻略</h4>

            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="$router.push('/post/create')"
              >写游记</el-button
            >
          </el-row>
          <!-- 引入文章列表组件 -->
          <Postlist :postList="postsListData" />
          <!-- 分页组件 -->
          <el-row>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[3, 5, 8, 10]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </el-row>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import postAsign from "@/components/post/postAsign";
import Postlist from "@/components/post/postlist";

export default {
  components: {
    postAsign,
    Postlist
  },
  data() {
    return {
      // searchValue:this.$router.query.city,
      recommendCity: ["北京", "上海", "广州"],
      postsListData: [],
      searchValue: this.$route.query.city,
      total: 0,
      start: 0,
      limit: 3
    };
  },
  watch: {
    $route() {
      this.searchValue = this.$route.query.city;
      console.log(this.searchValue);
      this.$router.push({
        path: "/post",
        query: {
          _start: this.start,
          _limit: this.limit,
          city: this.searchValue
        }
      });
      this.loadPost();
    }
  },
  //计算属性动态监测 start,limit,变化
  created() {
    console.log(this.$route);
    if (this.$route.path == "/post") {
      const query = {
        _start: this.start,
        _limit: this.limit
      };
      if (this.$route.query.city) {
        query.city = this.$route.query.city;
      }
      this.$router.push({
        path: "/post",
        query
      });
    }
    this.loadPost();
  },
  methods: {
    //获取来自postAsign的参数
    getData(cityName) {
      this.searchValue = cityName;
      this.$router.push({
        path: "/post",
        query: {
          _start: this.start,
          _limit: this.limit,
          city: this.searchValue
        }
      });
    },
    searchCity(index) {
      console.log(1);
      this.searchValue = this.recommendCity;
    },
    handleSearch() {
      console.log(13);
      const query = {
        _start: this.start,
        _limit: this.limit
      };
      if (this.searchValue) {
        query.city = this.searchValue;
      }
      this.$router.push({
        path: "/post",
        query
      });
    },
    //封装加载文章列表
    loadPost() {
      const params = {
        _start: this.start,
        _limit: this.limit
      };
      console.log("-----");
      console.log(params);
      // 统一用 url 参数，允许没有城市名
      if (this.searchValue) {
        params.city = this.searchValue;
      }
      this.$axios({
        url: "/posts",
        params: {
          _start: this.start,
          _limit: this.limit,
          city: this.searchValue
        }
      }).then(res => {
        console.log(res.data);
        this.postsListData = res.data.data;
        this.total = res.data.total;
        console.log(this.postsListData);
      });
    },
    handleCurrentChange(index) {
      //页数
      console.log(index);
      this.start = (index - 1) * this.limit;
      this.$router.push({
        path: "/post",
        query: {
          _start: this.start,
          _limit: this.limit,
          city: this.searchValue
        }
      });
    },
    handleSizeChange(size) {
      //条数
      this.limit = size;
      this.$router.push({
        path: "/post",
        query: {
          _start: this.start,
          _limit: size,
          city: this.searchValue
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 20px auto;
}
.menus-wrapper {
  width: 260px;
  // height: 200px;
  // background-color: red;
}
.post-wrapper {
  width: 700px;
  // height: 200px;
  // background-color: red;
  .search-input {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: 3px solid #ffa500;

    input {
      flex: 1;
      height: 20px;
      padding: 0px 20px;
      outline: none;
      border: 0;
      font-size: 16px;
      background: none;
    }

    .el-icon-search {
      color: #ffa500;
      cursor: pointer;
      font-size: 22px;
      font-weight: 700;
      margin-right: 10px;
    }
  }
  .recommendCity {
    padding: 10px 0;
    color: #666666;
    font-size: 12px;
    display: flex;
    .cityName {
      span {
        margin-right: 10px;
        cursor: pointer;
      }
      :hover {
        color: #ffa500;
      }
    }
  }
  .post-title {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    position: relative;
    h4 {
      font-weight: 400;
      font-size: 18px;
      color: orange;
    }
    h4:before {
      display: block;
      content: "";
      width: 72px;
      height: 2px;
      background: orange;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
  .post-list {
    width: 100%;
    padding: 20px 0;
  }
}
</style>
